/**
 * 状态栏
*/
Vue.component('tem-statusbar', {
    data: function(){
        return {

        }
    },
    template: `<div class="statusbar"></div>`
});
new Vue({
    el: '#statusbar'
});


/**
 * 页脚标签栏
*/
Vue.component('footer-tabbar',{
    data: function(){
        return{
            text: ['资讯', '盟友圈', '电视台', '商城', '战绩'],
            classIndex: 0,
            touter: ['/', '/', '/', '/mall', '/']
        }
    },
    methods: {
        tabbarBg: function(index, event){
            var target = event.target;
            if(target.tagName == 'DIV' || target.tagName == 'P'){
                target = target.parentNode.parentNode;
            }else if(target.tagName == 'A'){
                target = target.parentNode;
            }
            var parent = target.parentNode,
                oLi = parent.querySelectorAll('li');
            oLi[this.classIndex].classList.remove('tabbar-icon-bg');
            target.classList.add('tabbar-icon-bg');
            this.classIndex = index;
        }
    },
    computed: {
        
    },
    template: `<ul>
                    
                    <li v-for="(item, index) in text" :class="index==0?'tabbar-icon-bg':''" @click="tabbarBg(index, $event)">
                     
                            <a href="javascript:;">
                                <div class="tabbar-icon"></div>
                                <p>{{ item }}</p>
                            </a>
              
                    </li>
                    
                </ul>`,
}); 


/**
 * 订单详情页
*/
var orderDetails = {
    props: {setOrderDetails: Object},
    data: function(){
        return {
            orderDetails: {}
        }
    },
    watch: {
        setOrderDetails: function(newVal){
            this.orderDetails = newVal;
            //console.log(newVal)
        }
    },
    methods: {
        returnBtn: function(){
            var orderDetails = document.querySelector('.order-details-module');
            orderDetails.classList.remove('order-details-module-js');
        }
    },

    template:  `
        <div class="order-details-module">
            <div class="post-top">
                <div class="return" @click="returnBtn"></div>
                <div class="pay-text-center">订单详情</div>
                <div class="service">客服</div>
            </div>
            <div class="order-goods-details">
                <div class="order-list-con" v-for="(item, index) in orderDetails.goods">
                    <div class="list-left">
                        <div class="order-list-img">
                            <img :src="item.img">
                        </div>
                        <span>{{ item.gname }}</span>
                    </div>
                    <div class="order-list-right">{{ orderDetails.state }}</div>
                </div>
                <div class="order-goods-price">
                    <span>商品价格</span><span>15.00</span>
                </div>
                <div class="order-details">
                    <div class="order-details-top">订单详情</div>
                    <ul>
                        <li>订单编号: <span>{{ orderDetails.order_number }}</span></li>
                        <li>订单时间: <span>{{ orderDetails.time }}</span></li>
                        <li>购买账号: <span>垃圾带(黑色玫瑰)</span></li>
                        <li>支付方式: <span>人民币</span></li>
                        <li>礼券优惠: <span>无</span></li>
                    </ul>
                </div>
            </div>
            <div class="pay-order">
                <a href="javascript:;">取消订单</a><a href="javascript:;">支付人民币<span>45.00</span></a>
            </div>
        </div>
            `
};
/**
 * 订单页
*/
var order = {
    props: {setOrders: Array},
    data: function(){
        return {
            dataArr: []
        }
    },
    watch: {
        setOrders: function(newVal){
            this.dataArr = newVal;
        }
    },
    methods: {
        returnBtn: function(){
            var order = document.querySelector('.order-module');
            order.classList.remove('order-module-js');
        },
        // 点击进入商品详情
        cOrderList: function(index){
            var orderDetails = document.querySelector('.order-details-module');
            orderDetails.classList.add('order-details-module-js');
            // console.log(index)
            this.$emit('get-order-details', this.dataArr[index]);
            //alert(index)
        }
    },
    template: `
        <div class="order-module">
            <div class="post-top">
                <div class="return" @click="returnBtn"></div>
                <div class="pay-text-center">我的订单</div>
                <div class="service">客服</div>
            </div>
            <div class="order-within">仅显示当前app内购买的订单</div>
            <div class="order-list">
                <ul>
                    <li v-for="(item, index) in dataArr">
                        <a href="javascript:;">
                            <div class="order-list-top">
                                <span>{{ item.time }}</span>
                                <span>{{ item.state }}</span>
                            </div>
                            <div @click="cOrderList(index)">
                                <div class="order-list-con" v-for="(goods) in item.goods">
                                    <div class="list-left">
                                        <div class="order-list-img">
                                            <img :src="goods.img">
                                        </div>
                                        <span>{{ goods.gname }}</span>
                                    </div>
                                    <div class="order-list-right">{{ goods.price }}</div>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
            `
};
/**
 * 个人中心
*/
Vue.component('nav-personal', {
    data: function(){
        return {
            orders: [],
            setOrderDetails: {}
        }
    },
    computed: {
        userData: function(){
            var sessionUser = sessionStorage.getItem('user');
            sessionUser = sessionUser ? JSON.parse(sessionUser) : {};
            //console.log(userData)
            return sessionUser;
        }
    },
    methods: {
        // 点击我的订单
        clickOrder: function(){
            var This = this;
            var d = document,
                order = d.querySelector('.order-module');
            // 切换界面
            order.classList.add('order-module-js');
            var userSession = JSON.parse(sessionStorage.getItem('user'));
            // 获取当前用户的订单
            addLoad(.3);
            ajax({
                url: './php/get-order.php',
                data: {
                    uid: userSession.id
                },
                method: 'post',
                success: function(res){
                    remLoad();
                    res = JSON.parse(res);
                    if(res.error == 2){ // 用户没有订单时
                        This.orders = [];
                    }else if(res.error == 1){ 
                        This.orders = res.data;
                        // 拼接img地址
                        This.orders.forEach(function(goods, index){
                            goods.goods.forEach(function(item, index2){
                                if(item.cid <= 10){
                                    Tshi.orders[index].goods[index2]['img'] = './images/goods/'+ item.cid + '/' + item.thumb;
                                }else if(item.cid == 11){
                                    This.orders[index].goods[index2]['img'] = './images/pifu/' + item.thumb;
                                }else if(item.cid == 12){
                                    This.orders[index].goods[index2]['img'] = './images/yingxiong/' + item.thumb;
                                }
                            });
                        });
                    }
                    
                }
            });

        },
        // 退出登录
        loginOut: function(){
            var user = sessionStorage.getItem('user');
            if(!user){
                elasticFrame('您还未登录,是否前往登录?', function(){
                    window.location.href = "./login.html";
                });
            }else{
                user = JSON.parse(user);
                ajax({
                    url: './php/login-out.php',
                    data: {
                        user: user.name
                    },
                    method: 'post',
                    success: function(res){
                        if(res == 1){
                            elasticFrame('退出成功', function(){
                                window.location.href = "./login.html";
                            });
                        }  
                    }
                });
            }
            
        },
        getOrderDetails: function(data){
            this.setOrderDetails = data;
        },
        loginBtn: function(){
            // window.location.href = "./login.html";
        }
    },
    components: {
        'tem-order': order,
        'tem-order-details': orderDetails
    },
    template: `
        <div>
            <div class="head-user-details">
                <div class="head-user-about">
                    <div class="user-about-top">
                        <a href="javascript:;"><span class="iconfont icon-saoyisao"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-you"></span></a>
                    </div>
                    <div class="user-about-middle">
                        <a href="javascript:;">{{ userData.name }}<span class="about-middle-grade">lv1</span><span class="iconfont icon-nanxing"></span></a>
                    </div>
                    <div class="user-about-bottom">
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <span>0</span>
                                    <span>关注</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span>0</span>
                                    <span>粉丝</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span>0</span>
                                    <span>好友</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span>0</span>
                                    <span>发表</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="my-user" @click="loginBtn">
                        <div class="my-user-img">
                            <a href="javascript:;" data-text="" >
                                <img src="./images/index/user.jpg" />
                            </a>
                        </div>
                        <span class="iconfont icon-bianji"></span>
                    </div>
                </div>
                <div class="user-list">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <span class="iconfont icon-youjian"></span>
                                <span>与我相关</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="iconfont icon-huodongzhongxin"></span>
                                <span>活动中心</span>
                            </a>
                        </li>
                        <li @click="clickOrder">
                            <a href="javascript:;">
                                <span class="iconfont icon-wodedingdan"></span>
                                <span>我的订单</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="iconfont icon-shoucang"></span>
                                <span>我的任务</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="iconfont icon-shoucang"></span>
                                <span>我的收藏</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="user-footer">
                    <a href="javascript:;">
                        <span class="iconfont icon-shezhi"></span>设置
                    </a>
                    <a href="javascript:;" @click="loginOut">
                        <span class="iconfont icon-faxian"></span>退出
                    </a>
                </div>
            </div>
            <tem-order v-bind:set-orders="orders" v-on:get-order-details="getOrderDetails"></tem-order>
            <tem-order-details v-bind:set-order-details="setOrderDetails"></tem-order-details>
        </div>
            `
});


/**
 * 搜索详细
*/
Vue.component('search-details',{
    data: function(){
        return {
            // 商品列表
            goodsList: [],
            // 图片地址
            imagesName: [],
            
        }
    },
    computed: {
        isShop: function(){
            if(this.goodsList.length == 0){
                return true;
            }else{
                return false;
            }
            
        }
    },
    methods: {
        search: function(){
            var oSearch = document.querySelector('.detailed-search'),
                oSearcDetailed = oSearch.querySelector('.head-search-detailed');

            oSearcDetailed.classList.remove('lacement-detailed');
                remBodyBg();
        },
        searchGo: function(){
            var This = this;
            var d = document;
            var searchCon = d.querySelector('.search-detailed-con');
            //searchCon.innerHTML = '';

            var name = d.querySelector('.input-val').value;
            name = name.trim();
            addLoad(.3);
            ajax({
                url: './php/fuzzy_search.php',
                data: {
                    name: name
                },
                method: 'post',
                success: function(res){
                    remLoad();
                    //console.log(res)
                    res = JSON.parse(res);
                    This.goodsList = res;
                    
                    This.imagesName = [];
                    res.forEach(function(item){
                        if(item.cid <= 10){
                            This.imagesName.push('./images/goods/'+ item.cid +'/');
                        }else if(item.cid == 11){
                            This.imagesName.push('./images/pifu/');
                        }else if(item.cid == 12){
                            This.imagesName.push('./images/yingxiong/');
                        }
                    });
                    //console.log(res)
                    //console.log(This.goodsList)
                    //console.log(This.imagesName)
                }
            });

            //var cUl = d.createElement('ul');
            
            //console.log(1)
        }
    },
    template: `
        <div class="detailed-search" id="search">
            <div class="head-search-detailed" >
                <div class="head-search-detailed-middle">
                    <div class="search-detailed-top">
                        <div class="search-detailed-input">
                            <span class="iconfont icon-sousuo" @click="searchGo"></span>
                            <input type="text" placeholder="搜你喜欢的商品" class="input-val" />
                        </div>
                        <a class="head-search-detailed-remove" href="javascript:;" @click="search">取消</a>
                    </div>
                    <div class="search-detailed-con goods-list-goods">
                        <div class="search-history" v-show="isShop">
                            <div class="search-detailed-con-record">搜索历史记录</div>
                            <!--<ul>
                                <li></li>
                            </ul>-->
                            <div class="search-detailed-con-record-clear">暂无历史搜索记录</div>
                        </div>
                        <ul style="padding: 0.3rem; height: 100%; overflow-y: scroll; padding-bottom: 1.2rem; box-sizing: border-box;" v-show="!isShop" >
                            <li v-for="(item, index) in goodsList" >
                                <a href="javascript:;">
                                    <img :src="imagesName[index] + item.thumb">
                                    <div class="goods-list-goods-text">
                                        <h3>{{ item.gname }}</h3>
                                        <p><span>22222</span><span>11111</span></p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
            `
});



/**
 * 购物车
*/
Vue.component('tem-cat',{
    props: {setAddCat: Object},
    data: function(){
        return {
            catGoods: [],
            checked: []
        }
    },
    computed: {
        // 全选
        checkedAll: function(){
            return this.catGoods.length == this.checked.length && this.checked != 0;
        },
        // 计算购物车总价格
        prices: function(){
            var This = this;
            var price = 0;
            This.checked.forEach(function(item){
                This.catGoods.forEach(function(item2){
                    if(item == item2.gid){
                        price += Number(item2.price);
                        return;
                    }
                });
            });
            return price;
        }
    },
    watch: {
        setAddCat: function(newVal, oldVal){
            console.log(newVal, oldVal)
            
            var catGoods = this.catGoods;
            //console.log(catgoods)
            catGoods.forEach(function(item){
                //console.log(item)
                 //objectDiff(newVal, item);
            });
            
            this.catGoods.unshift(newVal);
            elasticFrame('添加购物车成功');
            
            // 判断2个对象是否相等
            function objectDiff(obj1, obj2){
                
                var flag = true;
                
                var o1 = obj1 instanceof Object,
                    o2 = obj2 instanceof Object;
                if(!o1 || !o2){
                    flag = false;
                }
                //console.log(flag)
                if(flag){
                    if(Object.keys(obj1).length !== Object.keys(obj2).length){
                        flag = false;
                    }
                }
                
                if(flag){
                    
                    for(var key in obj1){
                        var k1 = obj1[key] instanceof Object,
                            k2 = obj2[key] instanceof Object;
                        if(k1 || k2){
                            objectDiff(k1, k2);
                        }else if(obj1[key] !== obj2[key]){
                            
                            flag = false;
                        }
                    }
                }
                
                if(flag){
                    console.log(1)
                    elasticFrame('该商品最多只能购买一次');
                }else{
                    console.log(2)
                }
            }
            
        }
    },
    methods: {
        returnPost: function(){
            var cat = document.querySelector('.cat-module'),
            bodyContent = document.querySelector('.body-content');
            if(cat.getAttribute('data-scroll')){
                bodyContent.style.overflowY = 'scroll';
                cat.removeAttribute('data-scroll');
            }
            cat.classList.remove('cat-module-js');
        },
        // 全选 && 取消全选
        checkAll: function(){
            var This = this;
            // 取消全选
            if(This.catGoods.length == This.checked.length){
                This.checked = [];
            }else{ // 全选
                This.checked = [];
                This.catGoods.forEach(function(item){
                    This.checked.push(item.gid);
                });
            }
        },
        // 结账
        catPay: function(){
            var This = this;
            // 判断是否有选中商品
            if(This.checked.length == 0){
                elasticFrame('您还未选中要购买的商品!');
                return;
            }
            // 用户选中的商品
            var selectGoods = []; 
            This.catGoods.forEach(function(item){
                This.checked.forEach(function(gid){
                    if(item.gid == gid){
                        selectGoods.push(item);
                        return;
                    }
                });
            });
            // 传送商品数据至购买页
            This.$emit('get-cat-pay', selectGoods);

            // 切换购买页面
            var node = document.querySelector('.pay-module');
            switchGoodsDetailsFn(true, {
                node: node,
                className: 'pay-module-js'
            });
        },
        // 清空购物车
        empty: function(){
            var This = this;
            if(This.catGoods == 0) return;
            elasticFrame('真的要清空掉购物车吗?', function(){
                This.catGoods = [];
            });
        }
        
    },
    template: `
        <div class="cat-module">
            <div class="cat-post">
                <div class="post-top">
                    <div class="return" @click="returnPost"></div>
                    <div class="pay-text-center">购物车({{ catGoods.length }})</div>
                    <div class="service cat-service" @click="empty">清空</div>
                </div>
                <div class="cat-user">
                    <div class="cat-user-left">当前账号</div>
                    <div class="cat-user-name"><span>垃圾带 </span>(黑色玫瑰)</div>
                </div>
            </div>
            <div class="cat-goods-list">
                <div class="cat-goods-list-top">
                    <input type="checkbox" id="cat-goods-all" @click="checkAll" :checked="checkedAll" />
                    <label for="cat-goods-all"></label>
                    全选
                </div>
                <div class="cat-goods-list-con">
                    <ul class="cat-goods-list-con-ul">
                        <li v-for="item, index in catGoods">
                            <a href="javascript:;">
                                <input type="checkbox" :id="item.gid" :value="item.gid" v-model="checked"/>
                                <label :for="item.gid"></label>
                                <div class="pay-list-img">
                                    <img :src="item.img">
                                </div>
                                <div class="pay-list-text">
                                    <h3>{{ item.gname }}</h3>
                                    <p><span>4500</span><span>7800</span><span>{{ item.price }}</span></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="cat-footer">
                <div class="cat-footer-left">
                    <input type="checkbox" id="cat-footer-id" @click="checkAll" :checked="checkedAll">
                    <label for="cat-footer-id"></label>
                    全选
                </div>
                <div class="cat-footer-right">
                    <div class="cat-footer-price">共<span>{{ prices }}</span></div>
                    <div class="cat-footer-puy">
                        <a href="javascript:;" @click="catPay">结算<span>({{ checked.length }})</span></a>
                    </div>
                </div>
            </div>
        </div>
            `
});



/**
 * 轮播
*/
var temBanner = {
    data: function(){
        return {
            bannerArr: [
                {href: 'javascript:;', img: './images/index/banner/01.jpg'},
                {href: 'javascript:;', img: './images/index/banner/02.jpg'},
                {href: 'javascript:;', img: './images/index/banner/03.jpg'},
                {href: 'javascript:;', img: './images/index/banner/04.jpg'}
            ],
            ulWidth: {
                width: '0rem',
                transform: 'translageX(0)'
            }
        }
    },
    template: `
            <div class="banner">
                <ul :style="ulWidth">
                    <li v-for="(item, index) in bannerArr"><a :href="item.href"><img :src="item.img" /></a></li>
                </ul>
                <div class="olBtn">
                    <ol>
                        <!--<li class="banner-btn" v-for="(item, index) in bannerArr.length-4"></li>-->
                    </ol>
                </div>
            </div>
            `
    ,
    created: function(){
        
        bannerArr = this.bannerArr;
        // html font-size
        var fontSize = Number(getCss(document.querySelector("html"), 'font-size'));
        
        // 屏宽
        var vw = document.documentElement.clientWidth;
        // 设计稿屏宽
        var draft  = 750;
        // li宽度
        var liWidth = 600, 
        // 要设的边距值
            liMargin = 12;  
        // 添加li (前后各2张)
        this.bannerArr.unshift(bannerArr[bannerArr.length-1]);
        this.bannerArr.unshift(bannerArr[bannerArr.length-2]);
        this.bannerArr.push(bannerArr[2]);
        this.bannerArr.push(bannerArr[3]);

        // ul的宽度
        this.ulWidth.width = (liWidth+liMargin) / 100 * this.bannerArr.length +'rem';
        /* 边距宽等于 (要设的边距值 * li的个数 / li的个数减一)*/
        var ulMar = liMargin * bannerArr.length / (bannerArr.length-1); // 边距
        /* ul第一次的translateX    (600 - ((750-600) / 2) + ulMar) + liWidth + ulMar      ( li宽 - (屏宽-li宽)/2 + 边距) */
        var translateX = (liWidth - ((draft - liWidth) / 2) + ulMar) / 100 + (liWidth + ulMar) / 100;
        this.ulWidth.transform = `translateX(${-translateX}rem)`;
        //console.log(typeof fontSize)
        /* -540+600+15  (ul第一次的translateX + li宽 + 1个边距)  移动距离 */
        //要移动的距离
        var moveUp = liWidth + ulMar;

        //ul 结束位置
        var lateEndX = ((bannerArr.length - 5) * moveUp) / 100 + translateX;
        //this.ulWidth.transform = `translateX(${-lateEndX}rem)`;
    
        /* 轮播 */
        window.onload = function(){
            var nodePar = document.querySelector('.banner');
            var oUl = nodePar.querySelector('ul');
            new Getslide({
                elNode: oUl, // ul dom节点
                vw: vw, // 当前视口宽
                moveUp: moveUp, // 移动一次的距离
                lateStartX: -translateX, // ul第一次的translateX
                time: 400, // 过度时间400(毫秒)
                lateEndX: -lateEndX
            });
        }
        
        
        
    }
}

Vue.component('tem-banner', temBanner);














